
// 在Vue 中找到一个对象代理的例子并实现

/**
 * data() {
 *  return {
 *    a: 1,
 *    b: 2
 *  }
 * }
 * 
 * var vm = new Vue({
 *  data() {
 *    return {
 *      a: 1,
 *      b: 2  
 *    }
 *  }
 * })
 * 
 * console.log(vm.a);
 * vm -> Vue构造函数中 options.data() -> {}
 * vm.a -> options.data() -> {} -> a
 * 
 * vm.b = 3;
 * 
 * vm -> Vue构造函数中 options.data() -> {} -> b = 3;
 */

var vm = new Vue({
  data() {
    return {
      a: 1,
      b: 2
    }
  }
});
// console.log(vm);
console.log(vm.a); // 1

vm.b = 3;
console.log(vm.b) // 3

function Vue(options) {
  // console.log(options.data());
  var _data = options.data(),
      _this = this;

  // console.log(this);
  for (var k in _data) {
    // console.log(k);
    // this.a -> get -> _data.a
    (function (k) { // 需要一个独立的作用域保护k
      Object.defineProperty(_this, k, {
        get() {
          return _data[k];
        },
        set(newVal) {
          _data[k] = newVal
        }
      })

      // 或

      // _this.__defineGetter__(k, function () {
      //   return _data[k];
      // })
      // _this.__defineSetter__(k, function (newVal) {
      //   _data[k] = newVal
      // })

    })(k);
  }
}





